<template>
    <div class="app-container">
        <div class="search-container">
                <el-form ref="queryFormRef" :model="queryParams" :inline="true">
                <el-form-item prop="name" label="检查项目名称">
                <el-input
                    v-model="queryParams.checkItemName"
                    placeholder="请输入检查项目名称"
                    clearable
                />
                </el-form-item>
                <el-form-item prop="keywords" label="关键字">
                <el-input
                    v-model="queryParams.keywords"
                    placeholder="请输入关键字"
                    clearable
                />
                </el-form-item>
            <el-form-item label="项目类型" prop="typeId">
              <dictionary v-model="queryParams.typeId" :style="{width:'90px'}" code="Check_Type_Id" placeholder="全部"/>
            </el-form-item>
            <el-form-item label="状态" prop="status"  >
                <dictionary v-model="queryParams.status" :style="{width:'90px'}" code="status" placeholder="全部"/>
            </el-form-item>
                <el-form-item>
                <el-button type="primary"
                @click="handleQuery"
                 >
                    <i-ep-search />
                    搜索
                </el-button>
                <el-button @click="handleResetQuery">
                    <i-ep-refresh />
                    重置
                </el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-card shadow="never" class="table-container">
          <template #header>
            <div class="flex-x-between">
              <div>
             <el-button
                  v-hasPerm="['sys:checkItem:add']"
                  type="success"
                   @click="handleOpenDialog()"
                >
                  <i-ep-plus />
                  新增
                </el-button>
                <el-button
                  v-hasPerm="['sys:checkItems:delete']"
                  type="danger"
                >
                  <i-ep-delete />
                  批量删除
                </el-button>
              </div>
            </div>
          </template>
          
          <el-table
            v-loading="loading"
            :data="pageData"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column
              key="checkItemId"
              label="检查项目ID"
              align="center"
              prop="checkItemId"
            />
            <el-table-column
              label="检查项目名称"
              align="center"
              prop="checkItemName"
            />
            <el-table-column label="关键字" align="center" prop="keywords" />
            <el-table-column label="项目单价" align="center" prop="unitPrice" />
            <el-table-column label="项目成本" align="center" prop="cost" />
            <el-table-column label="单位" align="center" prop="unit" />
            <el-table-column label="项目类别" align="center">
              <template #default="scope">
                <el-tag :type=" 'success'">
                  {{ checkItemTypes[scope.row.typeId-1]?.name}}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="项目状态" align="center">
              <template #default="scope">
                <el-tag :type="scope.row.status == 1 ? 'success' : 'danger'">
                  {{ statusTypes[scope.row.status]?.name}}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="创建时间"
              align="center"
              prop="createTime"
              width="180"
            />
            <el-table-column label="操作" fixed="right" width="220">
              <template #default="scope">
                <el-button
                  v-hasPerm="['sys:checkItem:edit']"
                  type="primary"
                  link
                  @click="handleOpenDialog(scope.row.checkItemId)"
                >
                  <i-ep-edit />
                  编辑
                </el-button>
                <el-button
                  v-hasPerm="['sys:checkItem:delete']"
                  type="danger"
                  link
                  size="small"
                >
                  <i-ep-delete />
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-if="total > 0"
            v-model:total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="handleQuery"
          />
        </el-card>

          <!-- 新增/编辑表单弹窗 -->
    <el-dialog
      v-model="dialog.visible"
      :title="dialog.title"
       width="500px"
      @close="handleCloseDialog"
    >
      <el-form
        ref="CheckItemFormRef"
        :model="formData"
        :rules="rules"
        label-width="120px"
      >
      <el-form-item label="项目类别" prop="typeId">
            <el-select
                        v-model="formData.typeId"
                        clearable
                        class="!w-[100px]"
                    >
                        <el-option label="正常" :value="1" />
                        <el-option label="禁用" :value="0" />
              </el-select>
        </el-form-item>


        <el-form-item label="检查项目名称" prop="checkItemName">
          <el-input
                    v-model="formData.checkItemName"
                    placeholder="请输入检查项目名称"
                    clearable
                />
        </el-form-item>

        <el-form-item label="关键字" prop="keywords">
          <el-input
                    v-model="formData.keywords"
                    placeholder="请输入关键字"
                    clearable
                />
        </el-form-item>

        <el-form-item label="项目单价" prop="unitPrice">
          <el-input-number :min="1" :max="100000" v-model="formData.unitPrice" />
        </el-form-item>

        <el-form-item label="项目成本" prop="cost">
          <el-input-number :min="1" :max="100000" v-model="formData.cost" />
        </el-form-item>


        <el-form-item label="单位" prop="unit">
          <el-input v-model="formData.unit" placeholder="请输入单位" />
        </el-form-item>

        <el-form-item label="状态" prop="status">
            <el-radio-group v-model="formData.status">
              <el-radio :label="1">正常</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
          <el-button @click="handleCloseDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import ChecItemAPI, {CheckItemPageVO,CheckItemQuery ,CheckItemForm } from "@/api/checkItem";
    import DictItemAPI,{DictItemVO} from "@/api/dictItem";
import { eq } from 'lodash';
import { equal } from 'assert';
    const queryParams = reactive<CheckItemQuery>({
    pageNum: 1,
    pageSize: 10
    });
        // 挂号项目表单数据
    const formData = reactive<CheckItemForm>({
        checkItemId: 0,
        typeId: 1,
        checkItemName: "",
        keywords: "",
        unitPrice: 0,
        cost: 0,
        unit: "",
        status: 1,

    });
    //挂号项目类型数组
    const checkItemTypes = ref<DictItemVO[]>([]);
     //状态类型数组
     const statusTypes = ref<DictItemVO[]>([]);

    const CheckItemFormRef = ref(ElForm);
    /**  检查费用弹窗对象  */
    const dialog = reactive({
      visible: false,
      title: "",
    });
    const loading = ref(false);
    const removeIds = ref([]);
    const pageData = ref<CheckItemPageVO[]>([]);
    const total = ref(0);
    /** 挂号项目表单校验规则  */
    const rules = reactive({
      checkItemName: [
        {
          required: true,
          message: "请输入挂号项目名称",
          trigger: "blur",
        },
        {
          min: 1,
          max: 10,
          message: "长度在 1 到 10 个字符",
          trigger: "blur",
        },
        {
          pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]+$/,
          message: "请输入正确的挂号项目名称",
          trigger: "blur",
        }
      ],

      keywords: [
        {
          required: true,
          message: "请输入关键字",
          trigger: "blur",
        }
      ],
      unit: [
        {
          required: true,
          message: "请输入单位",
          trigger: "blur",
        },
        {
          min: 1,
          max: 10,
          message: "长度在 1 到 10 个字符",
          trigger: "blur",
        },
        {
          pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]+$/,
          message: "请输入正确的单位",
          trigger: "blur",
        }
      ],
    })
    /** 查询 */
    function handleQuery() {
      loading.value = true;
      ChecItemAPI.getPage(queryParams)
      .then((data) => {
        pageData.value = data.list;
        total.value = data.total;
      })
      .finally(() => {
        loading.value = false;
      });
    }

      /** 重置查询 */
  function handleResetQuery() {
    queryParams.checkItemName = undefined;
    queryParams.keywords = undefined
    queryParams.typeId = undefined;
    queryParams.status = undefined;
    queryParams.pageNum = 1;
    queryParams.pageSize = 10;
    handleQuery();
  }

  /** 表单提交 */
function handleSubmit (){
  CheckItemFormRef.value.validate((valid: any) => {
    if (valid) {
      const checkItemId = formData.checkItemId;
      if (checkItemId) {
        ChecItemAPI.update(checkItemId, formData)
          .then(() => {
            ElMessage.success("修改用户成功");
            handleCloseDialog();
            handleResetQuery();
          })
          .finally(() => (loading.value = false));
      } else {
        ChecItemAPI.add(formData)
          .then(() => {
            ElMessage.success("新增用户成功");
            handleCloseDialog();
            handleResetQuery();
          })
          .finally(() => (loading.value = false));
      }
    }
  });
}
 

  function handleSelectionChange(selection: any) {
    removeIds.value = selection.map((item: any) => item.id);
  }
  /** 关闭弹窗 */
  function handleCloseDialog() {
    dialog.visible = false;
    CheckItemFormRef.value.resetFields();
    CheckItemFormRef.value.clearValidate();
    formData.status = 1;
  }
    async function handleOpenDialog(id?: number) {
      dialog.visible = true;
      if (id) {
        dialog.title = "编辑检查费用";
        ChecItemAPI.getFormData(id).then((data) => {
          data.status = parseInt(data.status as any);
          Object.assign(formData, data);
    });
      } else {
        dialog.title = "添加检查费用";
      }
    }

    /**
     * 页面加载完成后，根据id查询字典数据
     * 
     */
    function loadDictData(dictId:number) {
      DictItemAPI.getDictItemList(dictId).then((data) => {
        return data;
      });
    }

    onMounted(async() => {
    handleQuery();
    statusTypes.value = await DictItemAPI.getDictItemList(89);
    checkItemTypes.value = await DictItemAPI.getDictItemList(90);
  });
</script>

<style scoped>

</style>